<template>
  <!--    面包屑导航-->
  <div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>导航栏管理</el-breadcrumb-item>
    <el-breadcrumb-item>导航栏列表</el-breadcrumb-item>
  </el-breadcrumb>
    <el-button style="margin-bottom: 15px;margin-left: 10px" type="primary"
    @click="navAddDialogVisible=true">增加</el-button>
  <el-card>
    <el-table
      :data="navList"
      style="width: 100%"
      >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="navName" label="导航栏名称"></el-table-column>
      <el-table-column prop="url" label="导航栏地址"></el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            :enterable="false"
            placement="top">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              @click="showEditDialog(scope.row.id)"
            ></el-button>
          </el-tooltip>
          <!--           删除 按钮 -->
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
              @click="removeNavById(scope.row.id)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
<!--    增加导航栏信息-->
    <el-dialog title="添加导航栏信息" :visible.sync="navAddDialogVisible" @close="addFormData"  >
      <el-form :model="navFormData"
               ref="navAddFormDataRef" >
      <el-row>
    <el-col :span="6">
        <el-form-item label="导航栏名称" prop="navName">
          <el-input  v-model="navFormData.navName" />
        </el-form-item>
    </el-col>
     </el-row>
     <el-row>
    <el-col :span="6">
        <el-form-item label="导航栏地址" prop="url" >
          <el-input  v-model="navFormData.url" />
        </el-form-item>
    </el-col>
      </el-row>
        <el-row>
          <el-col :offset="18">
            <el-button type="primary" @click="addNav">增加</el-button>
            <el-button @click="navAddDialogVisible = false">取 消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
<!--    修改导航栏信息-->
    <el-dialog title="修改导航栏信息" :visible.sync="navEditDialogVisible" @close="editFormData" >
      <el-form :model="navFormData" ref="navEditFormDataRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="导航栏名称" prop="navName">
              <el-input  v-model="navFormData.navName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="导航栏地址" prop="url">
              <el-input  v-model="navFormData.url" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="18">
            <el-button type="primary" @click="updateNav">修改</el-button>
            <el-button @click="navEditDialogVisible = false">取 消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { request } from '../../network/request';

export default {
  name: 'NavList',
  data() {
    return {
      navList: [],
      navFormData: {
        navName: '',
        url: '',
      },
      navAddDialogVisible: false,
      navEditDialogVisible: false,
    };
  },
  created() {
    this.getNavList();
  },
  methods: {
    getNavList() {
      request({
        url: '/nav/list',
      }).then((res) => {
        this.navList = res.data;
      });
    },
    addNav() {
      request({
        url: '/nav/add',
        params: this.navFormData,
        method: 'post',
      }).then((res) => {
        if (res.code !== 200) return this.$message.error('导航栏添加失败');
        this.getNavList();
        this.navAddDialogVisible = false;
        return this.$message.success('导航栏添加成功');
      });
    },
    showEditDialog(id) {
      request({
        url: `/nav/find/${id}`,
      }).then((res) => {
        this.navFormData = res.data;
      });
      this.navEditDialogVisible = true;
    },
    addFormData() {
      this.$refs.navAddFormDataRef.resetFields();
    },
    editFormData() {
      this.$refs.navEditFormDataRef.resetFields();
    },
    removeNavById(id) {
      request({
        url: `/nav/delete/${id}`,
        method: 'delete',
      }).then((res) => {
        if (res.code !== 200) return this.$message.error('删除失败');
        this.getNavList();
        return this.$message.success('删除成功');
      });
    },
    updateNav() {
      request({
        url: '/nav/put',
        method: 'put',
        params: this.navFormData,
      }).then((res) => {
        if (res.code !== 200) return this.$message.error('更新失败');
        this.getNavList();
        this.navEditDialogVisible = false;
        return this.$message.success('更新成功');
      });
    },
  },
};
</script>

<style scoped>

</style>
